<template>
	<kui-page :customHeader="false">
		<template v-slot:body>
			<view class="kui-mt-3">
				<kui-cell-group title="基础用法">
					<view class="kui-mt-3 kui-flex kui-w-full kui-flex-wrap kui-box-border">
						<template v-for="item in data">
							<view class="kui-w-1-3 kui-h-28">
								<view
									class="kui-bg-white kui-mr-1 kui-pb-1 kui-flex kui-flex-col kui-justify-center kui-items-center kui-h-24 kui-rounded-md">
									<kui-spin :type="item"></kui-spin>
									<view class="kui-pt-3">
										<kui-text selectable>{{ item }}</kui-text>
									</view>
								</view>
							</view>
						</template>
					</view>
				</kui-cell-group>
				<kui-cell-group title="自定义主题色">
					<kui-space :gap="[0, 30]">
						<view class="kui-w-1-3 kui-h-28">
							<view
								class="kui-bg-white kui-mr-1 kui-pb-1 kui-flex kui-flex-col kui-justify-center kui-items-center kui-h-24 kui-rounded-md">
								<kui-spin type="chase-dot" theme="magenta">
									<view class="kui-pt-3">
										<kui-text selectable>chase-dot</kui-text>
									</view>
								</kui-spin>
							</view>
						</view>
						<view class="kui-w-1-3 kui-h-28">
							<view
								class="kui-bg-white kui-mr-1 kui-pb-1 kui-flex kui-flex-col kui-justify-center kui-items-center kui-h-24 kui-rounded-md">
								<kui-spin type="bounce" theme="blue">
									<view class="kui-pt-3">
										<kui-text selectable>chase-dot</kui-text>
									</view>
								</kui-spin>
							</view>
						</view>
					</kui-space>
				</kui-cell-group>
				<kui-cell-group title="自定义背景色">
					<kui-space :gap="[0, 30]">
						<view class="kui-w-1-3 kui-h-28">
							<view
								class="kui-bg-white kui-mr-1 kui-pb-1 kui-flex kui-flex-col kui-justify-center kui-items-center kui-h-24 kui-rounded-md">
								<kui-spin type="chase-dot" background-color="hsl(100, 100%, 10%)">
									<view class="kui-pt-3">
										<kui-text selectable>chase-dot</kui-text>
									</view>
								</kui-spin>
							</view>
						</view>
						<view class="kui-w-1-3 kui-h-28">
							<view
								class="kui-bg-white kui-mr-1 kui-pb-1 kui-flex kui-flex-col kui-justify-center kui-items-center kui-h-24 kui-rounded-md">
								<kui-spin type="bounce" background-color="hsl(10, 10%, 50%)">
									<view class="kui-pt-3">
										<kui-text selectable>chase-dot</kui-text>
									</view>
								</kui-spin>
							</view>
						</view>
					</kui-space>
				</kui-cell-group>
				<kui-cell-group title="自定义大小">
					<kui-space :gap="[0, 0]">
						<view class="kui-w-1-3 kui-h-28">
							<view
								class="kui-bg-white kui-mr-1 kui-pb-1 kui-flex kui-flex-col kui-justify-center kui-items-center kui-h-24 kui-rounded-md">
								<kui-spin type="square-dot" size="sm">
									<view class="kui-pt-3">
										<kui-text selectable>chase-dot</kui-text>
									</view>
								</kui-spin>
							</view>
						</view>
						<view class="kui-w-1-3 kui-h-28">
							<view
								class="kui-bg-white kui-mr-1 kui-pb-1 kui-flex kui-flex-col kui-justify-center kui-items-center kui-h-24 kui-rounded-md">
								<kui-spin type="square-dot">
									<view class="kui-pt-3">
										<kui-text selectable>chase-dot</kui-text>
									</view>
								</kui-spin>
							</view>
						</view>
						<view class="kui-w-1-3 kui-h-28">
							<view
								class="kui-bg-white kui-mr-1 kui-pb-1 kui-flex kui-flex-col kui-justify-center kui-items-center kui-h-24 kui-rounded-md">
								<kui-spin type="square-dot" size="lg">
									<view class="kui-pt-3">
										<kui-text selectable>chase-dot</kui-text>
									</view>
								</kui-spin>
							</view>
						</view>
					</kui-space>
				</kui-cell-group>
				<kui-cell-group title="">
					<kui-text color="hsl(213,10.00%, 56.86%)">示例数据为组件支持的部分数据，详细支持数据请参考组件源码和组件文档</kui-text>
				</kui-cell-group>
			</view>
		</template>
	</kui-page>
</template>

<script lang="ts">
	export default {
		setup() {
			const data = [
				'square-turn',
				'chase-dot',
				'double-bounce',
				'rect',
				'cube1',
				'spinner',
				'dot',
				'bounce',
				'circle-dot',
				'cube2',
				'circle-dot2',
				'cube3',
				'circle-dot3',
				'square-dot',
				'square-dot2'
			];

			return {
				data
			}
		}
	}
</script>

<style>

</style>
